<template>

	<view class="page-bg">
		<u-navbar :autoBack="true" :border="false" :placeholder="true">
			<view slot="center" class="fb c3 f16">
				当日流水
			</view>
		</u-navbar>

		<scroll-view :scroll-top="scrollTop" :style="{height:scrollerHeight}" scroll-y @scrolltolower="onreachBottom">


			<view class=" mt10">
				<view class="b-b p12 f-c" v-for="item,index in allOrder" :key="index">
					</image>
					<view class="ml10 f1">
						<view class="c3 f16">
							{{item.orderNo}}
						</view>
						<view class="c6 f14 mt10">
							{{item.createTime}}
						</view>
					</view>
					<view class="c3 fb f20">
						
						+¥{{Number(item.amountTal).toFixed(2)}}
					</view>
				</view>
				<view class="f-f-c-c" v-show="allOrder.length==0">
					<image src="../../static/no-data.svg"></image>
					<view>暂无记录</view>
				</view>
			</view>
		</scroll-view>
	</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				currentIndex: 0,
				tabsStyle: {
					position: 'sticky',
					top: '44px',
					zIndex: 10,
					background: '#FFF'
				},
				tabs: [{
					name: '时长',
				}, {
					name: '接单数',
				}, {
					name: '当日流水'
				}, {
					name: '累计流水'
				}],
				params: {
					pageNum: 1,
					pageSize: 10,
					status: '4',
					queryTime: '',
				},
				scrollerHeight: 0,
				swiperContentHeight: 0,
				scrollTop: 9999,
				ismore: true,
				allOrder: [],
			}

		},
		onLoad() {
			let system = uni.getSystemInfoSync()
			this.tabsStyle.top = (system.statusBarHeight + 44) + 'px'
			this.getMidnight()
			this.getScollHeight();
			this.loadData();
		},
		methods: {
			onreachBottom() {
				if (this.ismore) {
					this.params.pageNum += 1
					this.loadData()
				}
			},
			// 设置scoll高度
			getScollHeight() {
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						let windowHeight = res.windowHeight;
						that.swiperContentHeight = (windowHeight - 100) + 'px';
						that.scrollerHeight = (windowHeight - 20) + 'px'; // 给15px的底部间距然后还要减掉搜索位置高度
					}
				});
			},
			getMidnight() {
				let today = new Date(); // 获取当前时间
				today.setHours(0, 0, 0, 0); // 设置时分秒为0
				let year = today.getFullYear();
				let month = today.getMonth() + 1;
				let day = today.getDate();
				let hours = today.getHours();
				let minutes = today.getMinutes();
				let seconds = today.getSeconds();
				this.params.queryTime =
					`${year}-${this.pad(month)}-${this.pad(day)} ${this.pad(hours)}:${this.pad(minutes)}:${this.pad(seconds)}`;
				console.log(this.params.queryTime, '  eee')
			},
			pad(value) {
				return value < 10 ? `0${value}` : value;
			},
			tabsChange(value) {
				console.log(value.index)
				this.currentIndex = value.index
			},
			//swiper 切换监听
			changeTab(e) {
				this.currentIndex = e.target.current;
			},
			navToView(url) {
				uni.navigateTo({
					url: url
				})
			},
			loadData() {
				let that = this
				that.request("get", "riderAppOrder/app/getSettlementOrderPageList", uni.getStorageSync('token'), that
						.params)
					.then(
						res => {
							console.log(res)
							if (res.code === 200) {
								if (that.params.pageNum == 1) {
									this.ismore = true
									that.allOrder = []
									that.allOrder = res.rows
								} else {
									that.allOrder = [...that.allOrder, ...res.rows]
								}
								if (res.rows.length < 10) {
									that.ismore = false
								} else {
									that.ismore = true
								}
							}
						})

			},
		}
	}
</script>

<style scoped lang="scss">
	.order-item {
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
	}

	.current-status-icon {
		width: 10px;
		height: 10px;
		background-color: #1AC388;
		border-radius: 10px;
	}

	.status-icon {
		width: 10px;
		height: 10px;
		background-color: #999999;
		border-radius: 10px;
	}

	.navigation-bg {
		width: 65px;
		height: 26px;
		background: rgba(26, 195, 136, 0);
		border-radius: 13px 13px 13px 13px;
		opacity: 1;
		border: 1px solid #1AC388;
	}

	.confirm-bg {
		width: 90px;
		height: 34px;
		margin-left: 10px;
		background: #1AC388;
		border-radius: 17px 17px 17px 17px;
		opacity: 1;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #1AC388;
	}

	.unConfirm-bg {
		margin-left: 10px;
		width: 90px;
		height: 34px;
		background: rgba(26, 195, 136, 0);
		border-radius: 17px 17px 17px 17px;
		opacity: 1;
		color: #1AC388;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #1AC388;
	}

	.recycle-bg {
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
	}
</style>